<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-07-17 13:28:31
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-07-26 16:03:05
 * @FilePath: \router\src\views\auth\login.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-07-17 13:28:31
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-07-17 16:20:14
 * @FilePath: \router\src\views\auth\login.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script lang="ts" setup>
import { loginApi } from "@/apis/userApi";
import {store} from "@/utils/helper";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter()

const form = reactive<{ account: string | number; password: number | string }>({
  account: "uncleTom",
  password: "123",
});

const errorMsg = ref({
  account: '',
  password: ''
})

// 封装验证逻辑
const validateForm = (field?: string) => {
  // 如果没有指定字段，验证所有字段
  if (!field) {
    errorMsg.value.account = !form.account ? '请输入手机号或邮箱' : ''
    errorMsg.value.password = !form.password ? '请输入密码' : ''
    // 返回是否验证通过
    return !errorMsg.value.account && !errorMsg.value.password
  }
  
  // 验证单个字段
  if (field === 'account') {
    errorMsg.value.account = !form.account ? '请输入手机号或邮箱' : ''
  }
  if (field === 'password') {
    errorMsg.value.password = !form.password ? '请输入密码' : ''
  }
}

const handleBlur = (type: string) => {
  validateForm(type)
};

const handleLogin = async() => {
  // 验证所有字段，如果返回 true 则表示验证通过
  if (validateForm()) {
    // TODO: 执行登录逻辑
  try {
    console.log('验证通过，可以登录')
    const res =  await loginApi({account:form.account,password:form.password})
    console.log(res,'token')
   
      store.set('token',{
        expire:10000,
        token:res.token
      })
      router.push('/')
  } catch (error) {
    
  }
  }
};


</script>

<template>
  <div
    class="bg-slate-300 h-screen flex justify-center items-start md:items-center p-5"
  >
    <div
      class="w-[720px] translate-y-32 md:translate-y-0 bg-white md:grid grid-cols-2 rounded-md shadow-md overflow-hidden"
    >
      <div class="p-6">
        <h2 class="text-center text-gray-700 text-lg mt-3">会员登陆</h2>

        <div class="mt-8">
          <loginInput v-model="form.account" :errorMsg="errorMsg.account" @blur="handleBlur" type="account" placeholder="请输入手机号或邮箱" />
          <loginInput
            v-model="form.password"
            class="mt-5"
            placeholder="请输入密码"
            type="password"
            @blur="handleBlur"
            :errorMsg="errorMsg.password"
            inputType="password"
          />
        </div>

        <!-- <button class="login-btn">登陆</button> -->
        <loginBtn @login="handleLogin" />
        <div class="flex gap-2 justify-center mt-5">
          <!-- <a class="login-a" href="">网站首页</a> -->
          <loginLink text="网站首页" />
          <loginLink text="会员注册" />
          <loginLink text="找回密码" />
        </div>
      </div>

      <div class="hidden md:block relative">
        <img src="/images/login.jpg" alt="" class="absolute h-full w-full object-cover" />
      </div>
    </div>
  </div>
</template>


<script lang="ts" >

</script>

<style lang="scss" scoped></style>
